<template>
    <div >
        <div id="UserChart" :style="{width: '100%', height: '130px'}"></div>
        <div class="user-option">
            <div v-for="(item, key) in dataOption" :key="key">
                <p>{{item.label}}</p>
                <p>{{item.value}}</p>
            </div>
        </div>
    </div>

</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        data () {
            return {
                dataOption: [
                    {label: '总用户', value: '3000'},
                    {label: '本月新增', value: '200'},
                ],
                myChart: null,
            }
        },
        mounted(){
            this.drawLine();
        },
        methods: {
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                this.myChart = this.$echarts.init(document.getElementById('UserChart'))
                // 绘制图表
                this.myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            label: {
                                backgroundColor: '#fff'
                            }
                        }
                    },
                    grid:{
                        x:10,
                        y:10,
                        x2:10,
                        y2:10,
                    },
                    xAxis: [
                        {
                            show: false,
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            show: false,
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            symbol: 'none',
                            areaStyle: {
                                normal: {
                                    color: '#d1e9fc' //改变区域颜色
                                }
                            },
                            itemStyle : {
                                normal : {
                                    color:'#348bf7', //改变折线点的颜色
                                    lineStyle:{
                                        color:'#348bf7' //改变折线颜色
                                    }
                                }
                            },
                            data: [120, 132, 101, 134, 190, 130, 110]
                        }
                    ]
                })
                setTimeout(() => {
                    window.onresize =  () => {
                        this.myChart.resize();
                    }
                },200);
                //监听id为box的元素
                erd.listenTo(this.$el,()=>{
                    this.myChart.resize();
                });
            }
        },
        beforeDestroy(){
            erd.uninstall(this.$el);
        },
    }
</script>

<style scoped lang="less">
    .user-option{
        display: flex;
        margin: 53px 0 50px 0;
        div{
            flex: 1;
            p{
                margin: 0;
                padding: 0;
                color: rgba(153, 153, 153, 1);
                font-size: 14px;
                text-align: center;
                &:last-child{
                    color: rgba(80, 80, 80, 1);
                    font-size: 30px;
                }
            }
        }
    }
</style>
